<div class="auth-main">
  <div class="auth-block">
    <h1>注册</h1>
    <a routerLink="/login" class="auth-link">已经有账号了? 去登录!</a>

    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal my-validate-form">
      <div class="form-group row">
        <label class="col-sm-3 control-label">姓名</label>

        <div class="col-sm-9">
          <input formControlName="nickname" [(ngModel)]="model.nickname" type="nickname" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 control-label">邮箱</label>

        <div class="col-sm-9">
          <input formControlName="email" [(ngModel)]="model.email" type="email" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 control-label">手机</label>

        <div class="col-sm-9">
          <input formControlName="phone" [(ngModel)]="model.phone" type="text" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 control-label">密码</label>

        <div class="col-sm-9">
          <input formControlName="password" [(ngModel)]="model.password" type="password" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-3 control-label">重复密码</label>

        <div class="col-sm-9">
          <input formControlName="repeatPassword" [(ngModel)]="model.repeatPassword" type="password" class="form-control">
        </div>
      </div>
      <div class="form-group row">
        <div class="offset-sm-3 col-sm-9">
          <button [disabled]="!form.valid" type="submit" class="btn btn-primary btn-auth">注册</button>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-3 col-form-label"></label>
        <div class="col-sm-9">
          <ng2-slim-loading-bar [position]="'absolute'"></ng2-slim-loading-bar>

          <div class="validate-errors">
            <div class="validate-error" *ngFor="let msg of formErrors">
              <div>{{ msg }}</div>
            </div>
          </div>
        </div>
      </div>

    </form>

  </div>
</div>
